<th:block layout:decorate="~{layout/checkoutPageLayout}" th:with="isCartContext=${true}">
    <head>
        <title>Cart</title>
    </head>

    <div id="cart" class="cart js-cart row" layout:fragment="content" th:fragment="ajax">

        <div class="col-md-12" th:if="${#lists.isEmpty(cart.orderItems)}">
            <div th:if="${#lists.isEmpty(cart.orderItems)}" class="cart-warning">
                <h1 th:utext="#{cart.empty}">Your cart is currently empty.</h1>
                <a th:href="@{/}" class="btn btn-primary btn-lg" th:utext="#{cart.continueShopping}">Continue Shopping</a>
            </div>
        </div>

        <div class="col-md-12" th:unless="${#lists.isEmpty(cart.orderItems)}">
            <!-- Content Zone for targeting the cart -->
            <blc:content-zone name="Cart Banner Ad Zone" deepLinks="deepLinks" />

            <h1 th:utext="#{cart.title}">Shopping Cart</h1>
        </div>

        <!-- Shopping Cart Items -->
        <div class="col-md-8" th:unless="${#lists.isEmpty(cart.orderItems)}">
            <div class="card checkout-card cart-summary-row">
                <div class="row">
                    <div class="cart-summary-title">
                        <h4 th:inline="text">[[#{cart.itemSummary}]] (<span th:utext="${cart.itemCount}"></span>)</h4>
                    </div>
                </div>
                <div class="row" th:unless="${cart.itemCount == 0}">
                    <th:block th:replace="cart/partials/cartProductRow" />
                </div>
            </div>
        </div>

        <!-- Cart Summary -->
        <div class="col-md-4" th:unless="${#lists.isEmpty(cart.orderItems)}">
            <th:block th:replace="cart/partials/cartPricingSummary" />

            <!-- Promotion Codes -->
            <th:block th:replace="checkout/partials/promoCodes" />
        </div>

        <div id="blc-extra-data" class="is-hidden" th:utext="${blcextradata}" th:if="${!#strings.isEmpty(blcextradata)}"></div>
    </div>
</th:block>